<template>
  <div class="list_item">
    <el-avatar :src="item.user.avatar" :size="50" shape="square"></el-avatar>
    <div class="right">
      <div class="info">
        <div>
          <div class="name">{{ item.user.username }}</div>
          <div class="desc shallow">{{ item.user.area }}</div>
        </div>
        <span class="time shallow">{{
          item.user.created_at.split('T')[0]
        }}</span>
      </div>
      <div class="nickname">
        <label for="nickname" class="text">备注名:</label>
        <el-input
          v-model="nickname"
          class="input"
          placeholder="请输入备注名称"
        ></el-input>
      </div>
      <div class="look">
        <div class="lookme">
          <span>看我的圈子</span>
          <el-switch v-model="lookme"></el-switch>
        </div>
        <div class="lookme">
          <span>看他的圈子</span>
          <el-switch v-model="lookhim"></el-switch>
        </div>
      </div>
      <div class="btn">
        <el-button type="primary" size="small" @click="applyHandle(true)"
          >通过</el-button
        >
        <el-button type="danger" size="small" @click="applyHandle(false)"
          >拒绝</el-button
        >
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const emit = defineEmits(['applyHandle'])

const props = defineProps({
  item: {
    type: Object,
    default: () => ({})
  }
})

const nickname = ref('') // 备注
const lookme = ref(false) // 是否看我的圈子
const lookhim = ref(false) // 是否看他的圈子

const applyHandle = (flag: boolean) => {
  const status = flag ? 'agree' : 'refuse'
  const me = lookme.value ? 1 : 0
  const him = lookhim.value ? 1 : 0
  const id = props.item.user.id
  emit('applyHandle', {
    status,
    lookme: me,
    lookhim: him,
    friend_id: id,
    username: nickname.value
  })
}
</script>

<style lang="scss" scoped>
.list_item {
  width: 400px;
  padding: 10px;
  border-radius: 15px;
  display: flex;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);

  .right {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    .info {
      width: 95%;
      display: flex;
      justify-content: space-between;
      margin-left: 5px;
      box-sizing: border-box;
      .desc {
        font-size: 14px;
        margin-top: 3px;
      }
      .time {
        font-size: 14px;
      }
    }

    .nickname {
      width: 95%;
      display: flex;
      align-items: center;
      margin-top: 15px;
      .text {
        white-space: nowrap;
        margin-right: 10px;
      }
    }

    .look {
      width: 95%;
      margin-top: 15px;
      .lookme {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
    }

    .btn {
      margin-top: 15px;
    }
  }
}
</style>
